<template>
  <!--通知公告-->
  <div>
    <div class="block">
      <el-row>
        <el-col :span="8">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-input placeholder="请输入内容或标题" style="width: 70%" id="sck" v-model="search">
            <el-button slot="append" id="search" @click="searchn">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="5" style="float: right">
          <el-button
            type="primary"
            size="small"
            @click="dialogFormVisible = true"
            style="margin-right: 10px"
            >添加公告</el-button
          >

          <el-dialog
            title="添加公告"
            :visible.sync="dialogFormVisible"
            width="500px"
          >
            <el-form :model="nnadd" :rules="addrules" ref="nn_add">
              <el-form-item style="margin: 0px" prop="n_title">
                <label>
                  <p><span class="red">*</span> 公告标题</p></label>
                <el-input v-model="nnadd.n_title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item style="margin: 0px" prop="n_content">
                <label> <p>公告内容</p></label>
                <el-input
                  type="textarea"
                  :rows="8"
                  placeholder="请输入内容"
                  v-model="nnadd.n_content"
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addnn('nn_add')">确 定</el-button>
            </div>
          </el-dialog>

          <el-button size="small">导出当前数据</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-table
          ref="multipleTable"
          :header-cell-style="{ background: '#e5f1ff', color: '#606266' }"
          :data="setupNnData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          tooltip-effect="dark"
          style="width: 100%"
          
        >
          <el-table-column
            prop="n_title"
            label="公告标题"
            width="120"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="n_content"
            label="公告内容"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="a_name" label="发布人" align="center">
          </el-table-column>
          <el-table-column
            prop="u_time"
            label="发布时间"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="chaoz" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="updatennidf(scope.$index)">编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="deletennidf(scope.$index)">删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>


              <el-dialog
                title="编辑公告"
                :visible.sync="dialogupdate"
                width="500px"
                align="left"
              >
                <el-form :model="setupNnupdate" :rules="uprules" ref="nn_add">
                  <el-form-item style="margin: 0px" prop="n_title">
                    <label style="text-aglin: left">
                        <p><span class="red">*</span> 公告标题</p></label>
                    <el-input
                      v-model="setupNnupdate.n_title"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item style="margin: 0px" prop="n_content">
                    <label> <p>公告内容</p></label>
                    <el-input
                      type="textarea"
                      :rows="8"
                      placeholder="请输入内容"
                      v-model="setupNnupdate.n_content"
                    >
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogupdate = false">取 消</el-button>
                  <el-button type="primary" @click="updatenn('nn_add')">确 定</el-button
                  >
                </div>
              </el-dialog>


               <el-dialog
                title="删除确认"
                :visible.sync="dialogdelete"
                width="500px"
              >
                <el-form>
                  <el-form-item style="margin: 0px">
                    <label>删除后无法恢复，确定删除此信息吗？</label>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogdelete = false">取 消</el-button>
                  <el-button type="primary" @click="deletenn()">确 定</el-button
                  >
                </div>
              </el-dialog>
      </el-row>

      <el-row style="margin-top: 20px">
        <div class="block">
          <el-button style="float: right; margin-left: 20px" size="small"
            >确定</el-button
          >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="float: right"
            background
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="setupNnData.length"
            :current-page="currentPage"
            
          >
          </el-pagination>
        </div>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
#search {
  padding: 11px;
  background-color: #0170f3;
  border-radius: 0%;
  color: #ffffff;
}
.el-button {
  padding: 12px 12px;
  border-radius: 0px;
}
p {
  color: #c0c4cc;
}
.red {
  color: #f56c6c;
}
</style>
<script>
import { mapState } from "vuex";
export default {
  name: "NoticeNotice",
  data() {
    return {
      value1: "",
      dialogFormVisible: false, //添加公告框弹出
      dialogupdate: false,//修改弹框
      dialogdelete: false,//删除的弹框
      //翻页一页显示多少数据设置的默认值
      pageSize:10,
      //现在是第几页刚开始显示的默认值
      currentPage:1,
      //通知公告查询状态
      nnall: {
        status: 1,
      },
      //公告添加的
      nnadd: {
        n_title: "",
        n_content: "",
        admin_id: "1",
      },
      //删除时的下标
      deletennid: "",
      //修改时的下标
      updatennid:"",
      //搜索框内容
      search:"",
      //添加公告的条件
      addrules:{
        n_title:[
            { required: true, message: '请输入标题名称', trigger: 'blur' }
           
        ],
         n_content:[
            { required: true, message: '请输入公告内容', trigger: 'blur' }
         ]
      },
       uprules:{
        n_title:[
            { required: true, message: '请输入标题名称', trigger: 'blur' }
           
        ],
         n_content:[
            { required: true, message: '请输入公告内容', trigger: 'blur' }
         ]
      }
      
    };
  },
  computed: {
    ...mapState("SetupModule", ["setupNnData", "setupNnupdate"]),
  },
  mounted() {
    //挂载后执行

    this.$store.dispatch("SetupModule/allnn", this.nnall);
  },
  
  methods: {


    //添加通知公告
    
    addnn(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
          this.$store.dispatch("SetupModule/addnn", this.nnadd)
          this.dialogFormVisible = false; //关闭弹出框
          } else {
            this.$message({
                showClose: true,
                message: '请把内容完善',
                type: 'error'
              });
          }
        });
      
    },
    //删除获取当前数组的下标
    deletennidf(i) {
      this.dialogdelete = true;
      console.log(i);
      this.deletennid = i;
    },
    //执行删除操作
    deletenn() {
      this.$store.dispatch("SetupModule/deletenn", this.deletennid);
      this.dialogdelete = false; //关闭弹出框
    },
    //获取数据下标同时获取数据作用
    updatennidf(i){
        this.$store.commit("SetupModule/updatenn",i);
        this.dialogupdate = true
    },
    //修改
    updatenn(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.setupNnupdate.admin_id = 1;
           this.$store.dispatch("SetupModule/updatenn", this.setupNnupdate);
         this.dialogupdate = false //关闭弹出框
          } else {
            this.$message({
                showClose: true,
                message: '请把内容完善',
                type: 'error'
              });
          }
        });

       
        
          
        //console.log();
    },
    //搜索框
    searchn(){



            if(this.search === ""){
                 this.$message({
                    showClose: true,
                    message: '请输入内容',
                    type: 'error'
                });
            }else{
               this.$store.dispatch("SetupModule/searchn", this.search);
            }

          
    },

    //翻页器
    //这是修改当前页面显示多少条数据
    handleSizeChange: function (size) {
        this.pageSize = size;
        console.log("这是上面的"+this.pageSize);
    },
    //这是点击多少页时发生的
    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log("这是下面的"+this.currentPage);
    }
  },
  watch:{
      //监听属性 当输入框的值为空时就会执行
        search:function(){
            if(this.search === ""){
                this.$store.dispatch("SetupModule/allnn", this.nnall);
            }
        }
      
  }
};
</script>